<script setup lang="ts" name="RetreatTallyList">
import { onMounted, ref, watch } from "vue";
import { GetRetreatTally } from "@/api/tally";
import type { RetreatTallyItem } from "@/utils/interface";

const themeVars = {
  searchContentBackground: "#ffffff",
  searchPadding: "0px",
  buttonSmallHeight: "30px",
  buttonSmallPadding: "12px",
  buttonDefaultHeight: "35px",
  buttonIconSize: "10px"
};

onMounted(() => {
  getStorage();
});

const input = defineProps(["retreatStorageId", "storageInfo"]);
const emit = defineEmits(["isOpen"]);
const retreatTallyList = ref([] as Array<RetreatTallyItem>);
const isLoading = ref(false);
watch(
  () => input,
  () => {
    getStorage();
  },
  { immediate: true, deep: true }
);
function getStorage() {
  const params = {
    retreatStorageId: input.retreatStorageId
  };
  isLoading.value = true;
  GetRetreatTally(params)
    .then((res: any) => {
      console.log(res);
      retreatTallyList.value = [] as Array<RetreatTallyItem>;
      if (res.success && res.data.length > 0) {
        retreatTallyList.value = res.data;
      }
      isLoading.value = false;
    })
    .catch(() => {
      isLoading.value = false;
    });
}

function showPop(show: boolean) {
  emit("isOpen", show);
}
</script>

<template>
  <div class="flex-col h-full p-[20px] w-full" style="background: #f6f6f6">
    <van-config-provider :theme-vars="themeVars">
      <div class="flex h-[30px] justify-between mb-[10px]">
        <div
          class="flex justify-center items-center h-full text-center text-base"
        >
          {{ input.storageInfo }}
        </div>
      </div>
      <van-empty
        v-if="!retreatTallyList || retreatTallyList.length <= 0"
        description="暂无数据"
      />
      <div
        v-if="retreatTallyList && retreatTallyList.length > 0"
        class="w-full max-h-[590px] mt-[10px] flex flex-col overflow-auto"
      >
        <div
          v-for="item in retreatTallyList"
          :key="item.tallyId"
          class="w-[95%] mx-auto my-[5px] p-[10px] flex-col h-auto rounded bg-white text-[13px] shadow"
        >
          <div class="flex w-full h-auto">
            <div class="flex flex-col w-[85%] h-auto px-[10px] gap-1">
              <div class="flex">
                <div class="flex flex-1">
                  <span class="text-slate-400">类型：</span>{{ item.tallyTypeName }}
                </div>
                <div class="flex flex-1">
                </div>
              </div>
              <div class="flex">
                <div class="flex flex-1">
                  <span class="text-slate-400">日期：</span>{{ item.tallyDate }}
                </div>
                <div class="flex flex-1">
                  <span class="text-slate-400">班次：</span>{{ item.timeSpaceName }}
                </div>
              </div>
              <div class="flex">
                <div class="flex flex-1">
                  <span class="text-slate-400">提货件数：</span>{{ item.tallyPiece }}
                </div>
                <div class="flex flex-1">
                  <span class="text-slate-400">提货吨数：</span>{{ item.tallyTon }}
                </div>
              </div>
              <div class="flex">
                <div class="flex flex-1">
                  <span class="text-slate-400">理货员：</span
                  >{{ item.createUserName }}
                </div>
                <div class="flex flex-1">
                </div>
              </div>
              <div class="flex">
                <div class="flex flex-1">
                  <span class="text-slate-400">提交时间：</span>{{ item.createTime }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </van-config-provider>
  </div>
</template>

<style scoped></style>
